<template>
  <div>
    <el-dialog
      title="项目经验"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :before-close="handleClose"
      width="800px"
    >
      <ul>
        <li class="j_b_box">
          <div>
            <p>学校名称</p>
            <el-input
              v-model.number="form.schoolName"
              placeholder="请输入学校名称"
              clearablex
            />
          </div>
          <div>
            <p>学历</p>
            <el-input
              v-model.number="form.education"
              placeholder="例如：本科"
              clearablex
            />
          </div>
        </li>
        <li class="j_b_box">
          <div>
            <p>专业</p>
            <el-input
              v-model.number="form.major"
              placeholder="请输入专业名称"
              clearablex
            />
          </div>
          <div>
            <p>时间段</p>
            <el-date-picker
              v-model="data"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="选择在职时间"
              end-placeholder="选择在职时间"
              value-format="yyyy.MM.dd"
              :picker-options="pickerOptions"
            />
          </div>
        </li>
        <li>
          <div class="textarea">
            <p>在校经历</p>
            <el-input v-model="form.content" type="textarea" rows="5" />
          </div>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleEducation">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { updateEducation } from '@/api/resume'
import { Indicator } from 'mint-ui'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      skillValue: null,
      options: [],
      data: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  watch: {
    form: {
      handler(val) {
        if (val.time !== undefined && val.time !== '') {
          // this.data = val.time.split('-');
        }
      },
      deep: true
    }
  },
  methods: {
    handleEducation() {
      Indicator.open('正在编辑中，请稍后。。。')
      this.form.time = this.data[0] + '-' + this.data[1]
      updateEducation([this.form])
        .then((res) => {
          Indicator.close()
          if (res.code === 200) {
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
          this.$emit('handlQuery')
          this.handleClose()
        })
        .catch(() => {
          Indicator.close()
        })
    },
    handleClose() {
      this.data = []
      this.$emit('handleClose')
    }
  }
}
</script>
<style lang="less" scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    & > div {
      width: 50%;
      padding: 10px 20px;
      p {
        line-height: 30px;
      }
      //   &:last-child {
      //       width: 100%;
      //   }
    }
    .textarea {
      width: 100%;
    }
  }
}
</style>
